<template>
  <div class="uplaod-sku-info-con">
    <a-button class="gray-outline" @click="addSkuDataModal.visible = true">添加资料</a-button>
    <a-table :data="list" :pagination="false" class="table-two-line mt10" size="mini" :scroll="{ y: 300 }">
      <template #columns>
        <a-table-column title="资料类型" #cell="{ record }">{{ record.type }}</a-table-column>
        <a-table-column title="预览图" #cell="{ record }">
          <ImgPopover :src="record.previewUrl">
            <template #con>
              <a-image :preview="false" width="40" height="40" fit="contain" :src="record.previewUrl" />
            </template>
          </ImgPopover>
        </a-table-column>
        <a-table-column title="附件" #cell="{ record }">
          <img width="40" height="40" v-if="record.fileType != 'img'" :src="addSkuDataModal.typMap[record.fileType || 'sub']" alt="" />

          <ImgPopover v-else :src="record.url">
            <template #con>
              <a-image :preview="false" width="40" height="40" fit="contain" :src="record.url" />
            </template>
          </ImgPopover>
        </a-table-column>
        <a-table-column title="资料名称" #cell="{ record }">
          <TextLimit :rows="1" position="top">{{ record.name }}</TextLimit>
        </a-table-column>
        <a-table-column title="操作人" #cell="{ record }">
          {{ record.createUname }}
        </a-table-column>
        <a-table-column title="操作时间" #cell="{ record }">
          {{ $setTime(record.gmtCreate) }}
        </a-table-column>
        <a-table-column title="操作" #cell="{ record, rowIndex }" width="90">
          <a-button type="text" @click="list.splice(rowIndex, 1)">移除</a-button>
          <a-button class="ml10" type="text" @click="download(record)">下载</a-button>
        </a-table-column>
      </template>
    </a-table>
  </div>
  <AddSkuDataModal ref="addSkuDataModal" @save="save" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import AddSkuDataModal from './addSkuDataModal.vue'
  export default defineComponent({
    components: { AddSkuDataModal },
    setup(props: any, { emit }) {
      const addSkuDataModal = ref()
      const data: any = reactive({
        list: [],
      })

      const save = (info: any) => {
        data.list.push(info)
      }

      const init = (info: any) => {
        data.list = info?.productInfoList || []
      }

      const download = (info: any) => {
        let a = document.createElement('a')
        a.target = '_blank'
        a.href = info.url
        a.click()
      }

      return {
        ...(toRefs(data) as any),
        addSkuDataModal,
        save,
        init,
        download,
      }
    },
  })
</script>

<style lang="less" scoped>
  .uplaod-sku-info-con {
    margin: 10px;
  }
</style>
